<template>
  <div>
    <el-card style="margin: 30px">
      <task-map
          v-model="nodes"
          :mode="mode"
          @click-node="handleClickNode"
          :click-menu-config="clickMenuConfig"
          :tooltip-config="tooltipConfig"
          :node-state-styles="stateStyles"
          :node-states="nodeStates"
      >

      </task-map>
    </el-card>
    <el-card style="margin: 0 30px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="节点数据">
          {{ nodes }}
        </el-descriptions-item>
        <el-descriptions-item label="模式">
          <el-select v-model="mode" placeholder="请选择">
            <el-option
              label="编辑"
              value="default"
            >
            </el-option>
            <el-option
                label="只读"
                value="display"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="点击节点时间列表">
          {{ clickNodeEvents }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>

</template>

<script>
import TaskMap from "@/components/new/task-map/TaskMap";
export default {
  name: "TaskMapDemo",
  components: {TaskMap},
  data() {
    return {
      nodes: [],
      mode: 'display',
      clickNodeEvents: [],
      stateStyles: {
        disabled: {
          stroke: '#6c6c6c',
          fill: '#dbdbdb'
        }
      },
      nodeStates: {
        disabled: new Set([1, 2])
      }
    }
  },
  methods: {
    handleClickNode(nodeId){
      this.clickNodeEvents.push(nodeId);
    }
  },
  computed: {
    clickMenuConfig(){
      return {
        getContent: (task) => {
          return `
          <div>
            <div>${JSON.stringify(task)}</div>
            <button class="click-menu-button">按钮</button>
          </div>
          `
        },
        handleMenuClick: (target, task) => {
          if(target.classList.contains('click-menu-button')){
            this.$message.info(JSON.stringify(task));
          }
        }
      }
    },
    tooltipConfig(){
      return {
        getContent: (task) => {
          return `
          <div>
            ${JSON.stringify(task)}
          </div>
          `;

        }
      }
    }
  },
  mounted() {
    new Promise(resolve => {
      setTimeout(() => {
        this.nodes = [{
          id: 1,
          dependencies: [2, 3]
        },
          {
            id: 2,
            dependencies: []
          },
          {
            id: 3,
            dependencies: [4]
          },{
            id: 4,
            dependencies: []
          }]
      }, 1000)
    })
  }
}
</script>

<style>
.click-menu-button{
  border-style: none;
  padding: 2px 5px;
  background-color: dodgerblue;
  color: white;
  border-radius: 5px;
}
</style>
